<script setup>
import { reactive } from 'vue'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}
const tableData = [
  {
    date: '客服主管',
    address: '描述描述描述描述描述描述',
  },
  {
    date: '运营',
    address: '描述描述描述描述描述描述',

  },
  {
    date: '仓管',
    address: '描述描述描述描述描述描述',

  },

]



</script>

<template>
 <div>
   <div class="title">添加账号</div>
   <div class="mainBox">
     <div class="form">
        <div class="menus">

         <el-form-item label="昵称：" >
           <el-input v-model="form.name" />

         </el-form-item>
         <el-form-item label="管理员密码：" :required="true">
         <el-input v-model="form.name" />
       </el-form-item>
         <el-form-item label="确认密码：" :required="true">
         <el-input v-model="form.name" />
       </el-form-item>
         <el-form-item label="姓名：" :required="true">
           <el-input v-model="form.name" />
         </el-form-item>

         <el-form-item label="角色：" prop="type">
           <el-checkbox-group >
             <el-checkbox value="Online activities" name="type">
               客服主管
             </el-checkbox>
             <el-checkbox value="Promotion activities" name="type">
               客服
             </el-checkbox>
             <el-checkbox value="Offline activities" name="type">
               仓管
             </el-checkbox>
             <el-checkbox value="Simple brand exposure" name="type">
               前端
             </el-checkbox>
             <el-checkbox value="Simple brand exposure1" name="type">
               后端
             </el-checkbox>
           </el-checkbox-group>
         </el-form-item>

     </div>
        <footer>
          <div class="userTable">
            <div style="margin-bottom: 20px">角色预览</div>
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#EEEEEE' ,border: '0.5px solid #DBDBDB'}">
              <el-table-column prop="date" label="角色" width="180" />
              <el-table-column prop="address" label="描述" />
            </el-table>
          </div>
          <div class="btn">
            <el-button type="primary" style="background-color: #509A80">保存</el-button>
            <el-button style="background-color: #EEEEEE">取消</el-button>
          </div>
        </footer>
   </div>
   </div>
 </div>
</template>

<style scoped lang="scss">
.title{
  margin-bottom: 20px;
}
.mainBox{
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 30px;

  .el-from{
    width: 300px
  }
  .el-input{
    width: 400px;
    height: 40px;

  }
  .menus{
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    width: 480px;
    //background-color: #42b983;
    el-form-item {
      display: flex;


    }
  }
}
//.el-form-item__content {
//  justify-content: flex-end;}
//el-form-item{
//  justify-content: flex-end;}
.btn{
  margin: 20px;
}
footer{
  margin-left: 30px;
}
</style>

